/* pages/user/index.wxss */
.user {
  background: rgb(249, 249, 249);
  height: 100vh;
  .userinfo {
    background: rgb(255, 255, 255);
    .container {
      display: flex;
      height: 200rpx;
      padding: 0 20rpx;
      align-items: center;
      padding: 40rpx 20rpx 20rpx 20rpx;
      background: rgb(250, 243, 230);
      .avatar {
        width: 140rpx;
        height: 140rpx;
        .a_Img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 50%;
        }
        .a_Img {
          border: 1px solid #d8d8d8;
        }
      }
      .operate {
        margin-left: 20rpx;
        .info {
          width: 240rpx;
          height: 50rpx;
          font-weight: 500;
          font-size: 40rpx;
          color: rgb(193, 152, 73);
          .unlogin {
            color: rgb(200, 159, 78);
          }
        }
        .click2login {
          margin: 0;
          display: flex;
          padding: 10rpx 0;
          font-size: 27rpx;
          font-weight: 400;
          color: rgb(200, 159, 78);
          background: rgb(250, 243, 230);
        }
        .btn_group {
          color: rgb(232, 214, 182);
          text-align: center;
          font-size: 12px;
          margin-top: 6rpx;
          display: flex;
          .edit {
            width: 120rpx;
            border-radius: 15px;
            border: 1px solid rgb(215, 196, 157);
          }
          .logout {
            width: 120rpx;
            margin-left: 4rpx;
            border-radius: 15px;
            border: 1px solid rgb(215, 196, 157);
          }
        }
      }
      .code {
        flex: 1;
        color: rgb(206, 170, 101);
        height: 110rpx;
        display: flex;
        justify-content: flex-end;
        .iconfont.icon-code {
          font-size: 56rpx;
        }
      }
    }
    .bottom {
      height: 80rpx;
      width: 750rpx;
      background: rgb(250, 243, 230);
      border-radius: 20px;
      margin-top: -58rpx;
    }
  }
  .account {
    display: flex;
    padding-bottom: 12rpx;
    .item {
      flex: 1;
      display: flex;
      text-align: center;
      flex-direction: column;
      .value {
        background: linear-gradient(
          0deg,
          rgb(249, 249, 249),
          rgb(255, 255, 255)
        );
        padding: 50rpx 0 5rpx 0;
      }
      .name {
        padding: 10rpx 0 20rpx 0;
      }
    }
  }
  .order {
    margin: 0 20rpx;
    border-radius: 10px;
    background: rgb(255, 255, 255);
    .title {
      display: flex;
      padding: 20rpx 20rpx 0 20rpx;
      justify-content: space-between;
    }
    .items {
      display: flex;
      padding-right: 20rpx;
      .item {
        flex: 1;
        display: flex;
        padding: 20rpx 0;
        text-align: center;
        flex-direction: column;
        .iconfont {
          font-size: 50rpx;
        }
        .name {
          padding: 15rpx 0 0 0;
        }
      }
    }
  }
  .service {
    margin: 20rpx;
    border-radius: 10px;
    background: rgb(255, 255, 255);
    .title {
      padding: 20rpx 20rpx 0 20rpx;
    }
    .items {
      display: grid;
      font-size: 12px;
      text-align: center;
      grid-row-gap: 15rpx;
      grid-column-gap: 15rpx;
      padding: 15rpx 0 20rpx 15rpx;
      grid-template-columns: repeat(5, 18%);
      .item {
        margin-bottom: 20rpx;
        .iconfont {
          font-size: 56rpx;
          color: rgb(244, 150, 125);
        }
        .name {
          padding: 15rpx 0 0 0;
        }
      }
    }
  }
}
